<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('报表')" />
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
<!--    一行   -->
    <div class="row">
<!--        第一个   -->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>部门人数统计</h5>
                    <div class="ibox-tools">
<!--                        <a class="collapse-link">-->
<!--                            <i class="fa fa-chevron-up"></i>-->
<!--                        </a>-->
<!--                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
<!--                            <i class="fa fa-wrench"></i>-->
<!--                        </a>-->
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="#">选项1</a>-->
<!--                            </li>-->
<!--                            <li><a href="#">选项2</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                        <a class="close-link">-->
<!--                            <i class="fa fa-times"></i>-->
<!--                        </a>-->
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="dept-count-chart"></div>
                    <!--                    <div id="dept-count-chart" style="width: 800px;height:450px;"></div>-->
                </div>
            </div>
        </div>
<!--        第二个   -->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>岗位人数统计</h5>
                    <div class="ibox-tools">
<!--                        <a class="collapse-link">-->
<!--                            <i class="fa fa-chevron-up"></i>-->
<!--                        </a>-->
<!--                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
<!--                            <i class="fa fa-wrench"></i>-->
<!--                        </a>-->
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="#">选项1</a>-->
<!--                            </li>-->
<!--                            <li><a href="#">选项2</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                        <a class="close-link">-->
<!--                            <i class="fa fa-times"></i>-->
<!--                        </a>-->
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="post-count-chart"></div>
                </div>
            </div>
        </div>
    </div>
<!--    二行   -->
    <div class="row">
<!--        第一个   -->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>部门平均薪资</h5>
                    <div class="ibox-tools">
<!--                        <a class="collapse-link">-->
<!--                            <i class="fa fa-chevron-up"></i>-->
<!--                        </a>-->
<!--                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
<!--                            <i class="fa fa-wrench"></i>-->
<!--                        </a>-->
<!--                        <ul class="dropdown-menu dropdown-user">-->
<!--                            <li><a href="#">选项1</a>-->
<!--                            </li>-->
<!--                            <li><a href="#">选项2</a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                        <a class="close-link">-->
<!--                            <i class="fa fa-times"></i>-->
<!--                        </a>-->
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="dept-salary-chart"></div>
                </div>
            </div>
        </div>
<!--        第二个    -->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>岗位平均薪资</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="post-salary-chart"></div>
                </div>
            </div>
        </div>
    </div>
<!--三行-->
    <div class="row">
<!--        第一个-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>部门全勤率</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="dept-attendance-chart"></div>
                </div>
            </div>
        </div>

<!--        第二个-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>岗位全勤率</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="post-attendance-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <!--四行-->
    <div class="row">
        <!--        第一个-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>部门平均迟到数</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="dept-late-chart"></div>
                </div>
            </div>
        </div>

        <!--        第二个-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>岗位平均迟到数</h5>
                    <div class="ibox-tools">
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="post-late-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    var prefix = ctx + "system/report";

    //部门人数
    $(document).ready(function(){
        var deptcountChart = echarts.init(document.getElementById("dept-count-chart"));
        deptcountChart.showLoading();
        var names=[];
        var values=[];
        $.ajax({
            type:"post",
            async:true,
            cache:false,
            url: prefix + "/countemployeebydept",
            data:{},
            dataType:"json",
            success:function (json){
                // var names = json.name
                if(json){
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '部门员工占比',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: json
                        },
                        series: [
                            {
                                name: '部门人数',
                                type: 'pie',
                                radius: '60%',
                                center: ['50%', '50%'],
                                data:json,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                }
            },
            error:function (errorMsg){
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //岗位人数
    $(document).ready(function(){
        var deptcountChart = echarts.init(document.getElementById("post-count-chart"));
        deptcountChart.showLoading();
        var names=[];
        var values=[];
        $.ajax({
            type:"post",
            async:true,
            cache:false,
            url: prefix + "/countemployeebypost",
            data:{},
            dataType:"json",
            success:function (json){
                if(json){
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '岗位员工占比',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: json
                        },
                        series: [
                            {
                                name: '岗位人数',
                                type: 'pie',
                                radius: '60%',
                                center: ['50%', '50%'],
                                data:json,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                }
            },
            error:function (errorMsg){
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //部门平均薪资
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("dept-salary-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/avgsalarybydept",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '部门平均薪资'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} '
                        },
                        legend: {
                            data: ['部门平均薪资'],
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '平均薪资',
                            type: 'bar',
                            itemStyle: {
                                color: '#3ca830'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //岗位平均薪资
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("post-salary-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/avgsalarybypost",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '岗位平均薪资'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} '
                        },
                        legend: {
                            data: ['岗位平均薪资']
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '平均薪资',
                            type: 'bar',
                            itemStyle: {
                                color: '#e83b1b'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //部门全勤率
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("dept-attendance-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/countattendancebydept",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '部门全勤率'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        legend: {
                            data: ['部门全勤率'],
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '全勤率',
                            type: 'bar',
                            itemStyle: {
                                color: '#538cad'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //岗位全勤率
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("post-attendance-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/countattendancebypost",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '岗位全勤率'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}%'
                        },
                        legend: {
                            data: ['岗位全勤率'],
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '全勤率',
                            type: 'bar',
                            itemStyle: {
                                color: '#a453ad'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //部门平均迟到
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("dept-late-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/countlatebydept",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '部门平均迟到数'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}'
                        },
                        legend: {
                            data: ['部门平均迟到数'],
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '迟到数',
                            type: 'bar',
                            itemStyle: {
                                color: '#7453ad'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });

    //岗位平均迟到数
    $(document).ready(function() {
        var deptcountChart = echarts.init(document.getElementById("post-late-chart"));
        deptcountChart.showLoading();
        var names = [];
        var values = [];
        $.ajax({
            type: "post",
            async: true,
            cache: false,
            url: prefix + "/countlatebypost",
            data: {},
            dataType: "json",
            success: function (json) {
                if (json) {
                    deptcountChart.hideLoading();
                    deptcountChart.setOption({
                        title: {
                            text: '岗位平均迟到数'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}'
                        },
                        legend: {
                            data: ['岗位平均迟到数'],
                        },
                        xAxis: {
                            data: json.names,
                            axisLabel: {
                                interval: 0
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '迟到数',
                            type: 'bar',
                            itemStyle: {
                                color: '#a453ad'
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            data: json.values
                        }]
                    });
                }
            },
            error: function (errorMsg) {
                alert("图标请求数据失败！");
                deptcountChart.hideLoading();
            }
        })
        $(window).resize(deptcountChart.resize);
    });


</script>
</body>
</html>